import {
    GetMessage,
    GetWorksCommentReply,
    IsReadMessage,
    DelWorksComment,
} from "~/api";
import emojiList from "@/config/emoji.js";

export const useContent = () => {
    const userStore = useUserStore();
    const pageStore = usePageStore();
    const route = useRoute();
    const pagination = reactive({
        size: 20,
        page: 1,
        total: 0,
    });
    const tabList = reactive(pageStore.isMobile ? [
        {
            label: "评论",
            value: 1,
        },
        {
            label: "点赞",
            value: 2,
        },
        {
            label: "收藏",
            value: 3,
        },
        {
            label: "系统通知",
            value: 4,
        },
    ] : [
        {
            label: "评论",
            value: 1,
        },
        {
            label: "点赞",
            value: 2,
        },
        {
            label: "收藏",
            value: 3,
        },
        {
            label: "私信",
            value: 5,
        },
        {
            label: "关注",
            value: 6,
        },
        {
            label: "系统通知",
            value: 4,
        },
    ]);
    const isShowDeleteDialog = ref(false);
    const activeTab = ref(route.params.type || 1);
    const list = ref([]);
    const isLoading = ref(false);
    const delType = ref(1);
    const delReplyItem = ref(null);
    const delReplyIndex = ref(null);
    const dialogueDialogRef = ref(null);

    const GetList = async (loading = true) => {
        isLoading.value = loading;
        const res = await GetMessage({
            type: activeTab.value,
            page: pagination.page,
            size: pagination.size,
        });
        isLoading.value = false;
        if (pageStore.isMobile) {
            list.value = [...list.value, ...res.data.data];
        } else {
            list.value = res.data.data;
        }
        pagination.total = res.data.total;
    };

    const GetReply = async (index) => {
        const item = list.value[index];
        const res = await GetWorksCommentReply({
            work_id: item.work_id,
            comment_id: item.id,
        });
        if (res.code == 200) {
            list.value[index].reply = res.data;
        }
    };

    const pageChangeHandle = (page) => {
        pagination.page = page;
        GetList();
    };

    const GoToWork = (item) => {
        let url = GetWorkLink(item.work.url, item.code);
        return navigateTo(
            url,
            {
                external: true,
                open: !pageStore.isMobile,
            }
        );
    };

    const onTabClick = (item) => {
        if (activeTab.value != item.value) {
            activeTab.value = item.value;
            pagination.total = 0;
            pagination.page = 1;
            list.value = [];
            GetList();
            SetRead();
        }
    };

    const SetRead = async () => {
        const key = { 1: "isComment", 2: "isLike", 3: "isStar", 4: "isNotice", 5: 'isDialogue', 6: 'isFollow' }[
            activeTab.value
        ];
        const isRead = userStore.messageLog[key];
        if (isRead) {
            await IsReadMessage({
                type: activeTab.value,
            });
            userStore.messageLog[key] = false;
        }
    };

    watch(
        () => route.query.type,
        (newVal) => {
            activeTab.value = newVal || 1;
            pagination.total = 0;
            pagination.page = 1;
            list.value = [];
            GetList();
            SetRead();
        }
    );

    const formatComment = (commentStr) => {
        for (let emoji of emojiList) {
            const reg = new RegExp(`\\[${emoji}\\]`, "g");
            commentStr = commentStr.replace(
                reg,
                `<img emoji-icon src='${_oss_}images/emoji/${emoji}.gif' />`
            );
        }
        return commentStr;
    };

    const onDeleteConfirm = async () => {
        let params = {};
        if (delType.value == 1) {
            params["comment_id"] = delCommentItem.value.id;
            params["work_id"] = delCommentItem.value.work_id;
        } else if (delType.value == 2) {
            params["reply_id"] = delReplyItem.value.id;
            params["work_id"] = delReplyItem.value.work_id;
        }

        const res = await DelWorksComment(params);

        if (res.code == 200) {
            GetReply(delReplyIndex.value);
            Message().success("删除成功！");
        } else {
            Message().warning(res.msg);
        }
    };

    const onDelReply = (item, index) => {
        delType.value = 2;
        delReplyItem.value = item;
        delReplyIndex.value = index;
        isShowDeleteDialog.value = true;
    };

    const onDialogueReply = (reply_id) => {
        dialogueDialogRef.value.open(reply_id);
    }

    return {
        list,
        tabList,
        activeTab,
        isLoading,
        pagination,
        isShowDeleteDialog,
        dialogueDialogRef,

        GetReply,
        onTabClick,
        GetList,
        SetRead,
        GoToWork,
        pageChangeHandle,
        formatComment,
        onDelReply,
        onDeleteConfirm,
        onDialogueReply
    };
};
